<template>
	<view :style="[AppSkinVar]">
		<view class="welcome">{{ $t('public.绑定手机号码') }}</view>
		<view class="item e-flex e-m-b-40">
			<image class="img-36 e-m-r-30" src="/pages/public/static/public/phone.png"></image>
			<view class="e-flex" v-if="countryAreaList && countryAreaList.length" @tap="$goTo('/pages/public/account/countryArea')">
				<image v-if="countryArea.logo" class="img-36 e-m-r-6" :src="countryArea.logo" mode=""></image>
				<text class="" v-if="countryArea">+{{ countryArea.countryArea }}</text>
				<image class="img-16 e-m-r-10 e-m-l-10" :src="$staticPath('black-arrow.png')" mode=""></image>
			</view>
			<e-input type="number" v-model="loginStr" border="none" :placeholder="$t('public.请输入您的手机号')" />
		</view>

		<view class="item e-flex e-m-b-40" v-if="hasInvitation">
			<image class="img-36 e-m-r-30" src="/pages/public/static/public/invitation.png"></image>
			<e-input v-model="saltValue" border="none" :placeholder="$t('public.请输入您的邀请码')" />
		</view>
		<view class="item e-flex e-m-b-40">
			<image class="img-36 e-m-r-30" src="/pages/public/static/public/shield.png"></image>
			<e-input v-model="validCode" border="none" :placeholder="$t('public.请输入验证码')" />
			<e-code-button
				ref="eCodeRef"
				:start-text="$t('public.获取验证码')"
				:change-text="$t('public.X秒重新获取')"
				:end-text="$t('public.重新获取')"
				size="small"
				type="primary"
				shape="circle"
				@click="getCode"
			></e-code-button>
		</view>
		<view class="e-flex-xy-center">
			<view class="sub-btn">
				<e-button type="primary" shape="circle" size="large" :text="$t('common.确定')" :loading="isDisabled" :throttleTime="1000" @click="submit"></e-button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import { postBindPhone,postRegisterSms } from '@/common/request/api';
import { useUser,useBasics,useInit } from '@/common/stores';
import { storeToRefs } from 'pinia';
import { useCurrentInstance, useLogin } from '@/common/hooks';
import type {
		CodeInstance
	} from '@/uni_modules/endless-ui/typing'
import { page } from '@/common/utils'

const props = defineProps({
	id:String,
	salt:String
})

const ctx = useCurrentInstance()
const userStore = useUser()
const { countryArea, countryAreaList } = storeToRefs(userStore)
const { hasInvitation } = storeToRefs(useBasics());
const {setTabbarPageIndex} = useInit()

userStore.getCountryAreaList()

const {login} = useLogin()
const loginStr = ref('')
const saltValue = ref(props.salt||uni.getStorageSync('userSalt')||'')
const eCodeRef = ref<CodeInstance>(null)
const getCode = () => {

				if (!loginStr.value) {
					ctx.$toastApp(ctx.$t('public.请输入您的手机号'))
					return
				}
				postRegisterSms(loginStr.value).then(res => {
					eCodeRef.value?.start()
				})

		}
const validCode = ref('')
const isDisabled = ref(false)
const submit = () => {
			if (!loginStr.value) {
				ctx.$toastApp(ctx.$t('public.请输入您的手机号/邮箱'))
				return
			}
			if (!validCode.value) {
				ctx.$toastApp(ctx.$t('public.请输入验证码'))
				return
			}
			isDisabled.value = true
			let params = {}

			postBindPhone({
					phone: loginStr.value,
					validCode: validCode.value,
					openid:props.id,
					fromType: getApp().globalData.payFromType,
					salt:saltValue.value
			}).then(res => {
					login(res.data.access_token)
					const pagesPath = page(2)
					if (!pagesPath||pagesPath === '/' || pagesPath === 'pages/public/account/binding') {
						setTabbarPageIndex(0);
						ctx.$switchTab('/pages/tabbar/index')
					} else {
						ctx.$back()
					}
					uni.removeStorageSync('userSalt')


			}).finally(() => {
				isDisabled.value = false
			})
		}
</script>

<style>
page {
	background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.welcome {
	width: 610rpx;
	margin: auto;
	padding: 80rpx 0;
	font-weight: 600;
}
.item {
	width: 610rpx;
	margin: auto;
	box-shadow: 0 2rpx 0 0 #eeeeee;
	padding: 26rpx 10rpx;
}

.sub-btn {
	width: 600rpx;
	padding-top: 100rpx;
}
</style>
